/**
 * Created by Tsuna Cheung on 2016/11/30.
 * Updated by qiangqiang on 2016/12/3 -version 0.1
 * Updated by Tsuna Cheung on 2016/12/3 -version 0.2
 * Upadated by Tsuna Cheung on 2016/12/16
 * Upadated by Tsuna Cheung on 2016/12/21
 * Upadated by Tsuna Cheung on 2017/1/17
 * Upadated by qijiahao on 2017/2/3
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Navigator
} from 'react-native';

import Register from '../javascriptPage/Register';
import Buttons  from '../component/Buttons'
import Header from '../component/HeaderWithoutBack'
import IndexTabBar from '../javascriptPage/IndexTabBar'
/*  第三方组件 CheckBox
 * 安装 ：terminal输入
 * npm install react-native-checkbox --save
 *
 * props：
 *  label : text that will be displayed along the checkbox
 *  labelBefore : position the label before the checkbox (boolean). The default value is false
 *  labelStyle : style object that will be applied to the label
 *  checked : initial checked value
 *  checkedImage: checked image (e.g.: require('PATH_TO_IMAGE'))
 *  checkboxStyle : style object that will be applied to the checkbox
 *  uncheckedImage: unchecked image (e.g.: require('PATH_TO_IMAGE'))
 *  onChange : callback function that will be invoked with the toggled checked property as argument.
 *  containerStyle : style object that will be applied to the container
 *  'underlayColor' : style the touchable component underlay color
 */
import CheckBox from 'react-native-checkbox';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
/*
 第三方组件 react-native-textinput-effects
 npm install react-native-textinput-effects --save
 https://github.com/halilb/react-native-textinput-effects
 */
import {
    Sae,
    Hideo,
    Hoshi
} from 'react-native-textinput-effects';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: '',
            checked:false,
            userName:'',
            password:''
        };
    }

    _gotoRegister= ()=> {
        const {navigator}=this.props;
        if (navigator) {
            navigator.push({
                name: 'Register',
                component: Register
            })
        }
    };

    _fetchData = () => {
        let url = "http://120.77.38.2/ZhiXin";
        fetch(url, {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                username: this.state.userName,
                userpass: this.state.password
            })
        }) .then((response) => response.text())
            .then((responseText) => {
                this._confirmUser(responseText);
            })
            .catch((error) => alert(error+"请连接网络"));

    };

    _confirmUser =(responseText)=> {
        if (responseText == "登入成功") {
            this._gotoMain();
        }
        else{
            /* 若测试时想直接跳过验证则把下行代码注释掉，下下行代码取消注释 */
            // alert(responseText);
            this._gotoMain();
        }
    };

    _gotoMain =()=>{
        const {navigator}=this.props;
        if (navigator) {
            navigator.push({
                name: 'IndexTabBar',
                component:IndexTabBar
            })
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <Header name="职信"/>

                <View style={styles.body}>
                    <View style={styles.ImageView}>
                        <Image style={styles.logo}
                               source={require('../Images/logo.png')}/>
                    </View>

                    <View style={styles.login}>
                        <View style={styles.login_item}>

                            <Hoshi
                                label={'账号'}
                                // this is used as active border color
                                borderColor={'#2E7CDE'}
                                // this is used to set backgroundColor of label mask.
                                // please pass the backgroundColor of your TextInput container.
                                backgroundColor={'white'}
                                onChangeText={(text) => {this.state.userName = text;}}
                                style={styles.login_input}
                            />

                        </View>

                        <View style={styles.login_item}>
                            <Hoshi
                                label={'密码'}
                                // this is used as active border color
                                borderColor={'#2E7CDE'}
                                // this is used to set backgroundColor of label mask.
                                // please pass the backgroundColor of your TextInput container.
                                backgroundColor={'white'}
                                onChangeText={(text) => {this.state.userName = text;}}
                                style={styles.login_input}
                            />

                        </View>

                        <View style={styles.extra_function}>
                            <View style={styles.remember}>
                                <CheckBox  label='记住账号和密码'
                                           checked={this.state.checked}
                                           checkboxStyle={{width:15,height:15}}
                                           labelStyle={styles.remember_text}
                                           onChange={(checked) => this.state.checked?this.setState({checked:false}):this.setState({checked:true})}
                                />
                            </View>

                            <TouchableOpacity>
                                <Text style={styles.forget_text}>
                                    忘记密码?
                                </Text>
                            </TouchableOpacity>
                        </View>
                    </View>

                    <View style={styles.buttons}>
                        <Buttons buttonText ="注册"
                                 buttonColor="#CACACA"
                                 buttonFunction={this._gotoRegister}/>

                        <Buttons buttonText="登入"
                                 buttonColor="#2E7CDE"
                                 buttonFunction={this._fetchData}/>
                    </View>
                </View>
            </View>


        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: "#FFFFFF"
    },
    body: {
        flex: 10
    },
    ImageView: {
        alignItems: 'center',
        marginTop: 20
    },
    logo: {
        height: 200,
        width: 200
    },
    login: {
        marginTop: 10
    },
    login_item: {
        flexDirection: 'row',
        marginTop: 30
    },
    login_input:{
        flex:1,
        marginLeft:40,
        marginRight:40
    },
    extra_function: {
        flexDirection: 'row',
        marginTop: 30
    },
    remember:{
        flexDirection:'row',
        marginLeft: 40,
        flex: 1
    },
    remember_text: {
        fontSize: 12
    },
    forget_text: {
        color: '#AAAAAA',
        fontSize: 12,
        flex: 2,
        textAlign: 'right',
        marginRight: 40
    },
    buttons: {
        flexDirection: 'row',
        alignItems: 'center',
        marginTop: 20,
        marginLeft: 40
    }
});